import { useState } from "react";
import { Button, Flex, Tooltip } from "antd";
import { SearchOutlined } from "@ant-design/icons";
const ButtonVieew = () => {
    const [loading, setLoading] = useState(false);
    return (
        <>
            <h2>按钮</h2>
            <Flex gap={10} style={{ marginBottom: 20 }}>
                <Button type='primary'>按钮</Button>
                <Button type='primary' danger>
                    按钮
                </Button>
            </Flex>
            <Flex gap={10} style={{ marginBottom: 20 }}>
                <Button type='primary' block>
                    按钮
                </Button>
            </Flex>
            <Flex gap={10} style={{ marginBottom: 20 }}>
                <Tooltip title='搜索按钮'>
                    <Button
                        type='primary'
                        shape='circle'
                        icon={<SearchOutlined />}
                    />
                </Tooltip>
                <Button type='primary' icon={<SearchOutlined />}>
                    搜索
                </Button>
            </Flex>
            <Flex gap={10} style={{ marginBottom: 20 }}>
                <Button
                    type='primary'
                    loading={loading}
                    onClick={() => setLoading(true)}
                >
                    按钮
                </Button>
            </Flex>
        </>
    );
};

export default ButtonVieew;
